<template>
  <div>我是父组件{{ title }}-{{ obj.age }}</div>
  <children />
  <div>count:{{ count }}</div>
  <div>newcount:{{ newcount }}</div>
  <button @click="count++">add</button>
  <button @click="handleStop">stop</button>
</template>

<script setup>
import { title, obj } from "./index";
import children from "./children.vue";
import {
  ref,
  effectScope,
  getCurrentScope,
  onScopeDispose,
  computed,
  watch,
  watchEffect,
} from "vue";
const count = ref(0);
const scope = effectScope(true); //effectScope函数默认参数是false,当为true的时候是游离状态 当调用allScope.stop()时不能停止scope收集的响应式效果，如果为false的话可以
const allScope = getCurrentScope();

let newcount;

scope.run(() => {
  newcount = computed(() => {
    console.log(count.value, 600);
    return count.value * 2;
  });
  watch(newcount, (newVal) => {
    console.log("watch", newVal);
  });
  watchEffect(() => {
    console.log("watchEffect", newcount.value);
  });
  onScopeDispose(() => {
    console.log("onScopeDispose1");
  });
  console.log(getCurrentScope(), 1230);
});
onScopeDispose(() => {
  console.log("onScopeDispose2");
});
const handleStop = () => {
  console.log("stop");
  //scope.stop()
  allScope.stop();
};
console.log(scope, allScope, 65412000);

const sdhf = ref(0);
const rmp = computed(() => sdhf.value * 2);
setTimeout(() => {
  sdhf.value = 10;
  console.log(rmp.value, 5000);
});
</script>

<style scoped>
.contClass {
  position: fixed;
  right: 50px;
  bottom: 50px;
}
</style>
